/**
 * Created by xiangjiayu on 2017/7/19.  考评
 */

import React from 'react';
import {Icon,Button,Row,Col,Input,Select,DatePicker,Modal,AutoComplete,Table} from 'antd';
import CheckBox from '../../../components/common/CheckBox/CheckBox';//自定义 多选框

function onSelect(value) {
}


export default class Evaluation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            //弹窗
            Modal_kp_Add: false,
        };
    }
    //弹窗
        //新增
    showModal_kp_Add(Modal_kp_Add) {
        this.setState({ Modal_kp_Add });
    }
    //自动补全
    handleSearch = (value) => {
      this.setState({
          dataSource: !value ? [] : [
            value,
            value + value,
            value + value + value,
          ],
      });
    }
    render(){
        let data_tjjg =[{
         text: '正常',
         state:true,
         type:'radio'
        },{
          text: '异常',
          state:'',
          type:'radio'
         }];
        const { dataSource } = this.state;
          //  考评打分表格
          const TableSource = [{
            key: '1',
            kc: '推拿课',
            xf: 12,
            df: <Input className="text-c" placeholder="10"/>
          }, {
            key: '2',
            kc: '推拿课',
            xf: 32,
            df: <Input className="text-c" placeholder="10"/>
          }, {
            key: '3',
            kc: '推拿课',
            xf: 32,
            df: <Input className="text-c" placeholder="10"/>
          }, {
            key: '4',
            kc: '推拿课',
            xf: 32,
            df: <Input className="text-c" placeholder="10"/>
          }];
          const columns = [{
            title: '课程',
            dataIndex: 'kc',
            key: 'kc',
            className:'text-c',
            width:'40%'
          }, {
            title: '学分',
            dataIndex: 'xf',
            key: 'xf',
            className:'text-c',
            width:'30%'
          }, {
            title: '得分',
            dataIndex: 'df',
            key: 'df',
            className:'text-c',
            width:'30%'
          }];
        return(
            <div className="modal-example-cont">
                <Button onClick={() => this.showModal_kp_Add(true)}>新增/编辑考评</Button>
                <Modal
                  title="新增考评"
                  wrapClassName="vertical-center-modal"
                  visible={this.state.Modal_kp_Add}
                  onCancel={() => this.showModal_kp_Add(false)}
                >
                    <div className="modal-add-cont">
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label className="ant-form-item-required"><span className="span-left">学员姓名</span></label>
                                </div>
                            </Col>
                            <Col span={10}>
                                <div className="ant-form-item-control has-error">
                                    {/*<Input size="large" placeholder="请输入学员姓名"/>*/}
                                    <AutoComplete
                                      dataSource={dataSource}
                                      onSelect={onSelect}
                                      onSearch={this.handleSearch}
                                      placeholder="请输入学员姓名"
                                    />
                                </div>
                            </Col>
                            <Col span={9}>
                                <div className="error-tip"><Icon type="minus-circle-o" />请输入联系电话</div>
                            </Col>
                        </Row>
                        <div className="modal-info-cont">
                            <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">专业名称</span></label>
                                </div>
                            </Col>
                            <Col span={19}>
                                <div className="ant-form-item-control">
                                    高级月嫂专业
                                </div>
                            </Col>
                        </Row>
                            <Row gutter={16}>
                                <Col span={5} className="text-r">
                                    <div className="ant-form-item-label">
                                        <label><span className="span-left">专业学分</span></label>
                                    </div>
                                </Col>
                                <Col span={19}>
                                    <div className="ant-form-item-control">
                                        48
                                    </div>
                                </Col>
                            </Row>
                        </div>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">考评打分</span></label>
                                </div>
                            </Col>
                            <Col span={19}>
                                <Table size="small" bordered scroll={{y: 150 }} dataSource={TableSource} columns={columns} pagination={false}/>
                            </Col>
                        </Row>
                        <div className="modal-info-cont">
                            <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">考评得分</span></label>
                                </div>
                            </Col>
                            <Col span={19}>
                                <div className="ant-form-item-control">
                                    <b className="col-red">30</b>
                                </div>
                            </Col>
                        </Row>
                        </div>
                        <Row gutter={16}>
                            <Col span={5} className="text-r">
                                <div className="ant-form-item-label">
                                    <label><span className="span-left">备注</span></label>
                                </div>
                            </Col>
                            <Col span={19}>
                                <div className="ant-form-item-control">
                                    <div className="textarea-surplus">
                                        <Input type="textarea" rows="10" size="large" placeholder="请输入备注"/>
                                        <p>还可以输入200字</p>
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </Modal>
            </div>

        )
    }
}